import React from 'react'

interface StatsProps extends React.PropsWithoutRef<JSX.IntrinsicElements['svg']> {
    engaged?: boolean
}

export function Stats({ engaged = false, ...props }: StatsProps): JSX.Element {
    const color1 = engaged ? '#FEF5E2' : '#FCB711'
    const color2 = engaged ? '#FEF5E2' : '#F1AA04'
    return (
        <svg width="182" height="185" viewBox="0 0 182 185" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
            <path
                d="M2.53326 0.436523L0.100464 183.731L181.65 184.66L181.78 174.793L11.0529 174.033L11.3088 0.516031L2.53326 0.436523Z"
                fill={color1}
            />
            <path
                d="M18.2434 160.954C18.2434 158 20.7518 155.606 23.8456 155.606C26.9413 155.606 29.4497 158 29.4497 160.954C29.4497 163.906 26.9413 166.302 23.8456 166.302C20.7518 166.302 18.2434 163.906 18.2434 160.954Z"
                fill={color2}
            />
            <path
                d="M73.2477 77.2209C73.2477 74.2686 75.7561 71.8726 78.8499 71.8726C81.9456 71.8726 84.454 74.2686 84.454 77.2209C84.454 80.1751 81.9456 82.5691 78.8499 82.5691C75.7561 82.5691 73.2477 80.1751 73.2477 77.2209Z"
                fill={color2}
            />
            <path
                d="M116.485 105.783C116.485 102.829 118.993 100.435 122.089 100.435C125.183 100.435 127.691 102.829 127.691 105.783C127.691 108.737 125.183 111.131 122.089 111.131C118.993 111.131 116.485 108.737 116.485 105.783Z"
                fill={color2}
            />
            <path
                d="M155.89 21.0732C155.89 18.1189 158.399 15.7249 161.493 15.7249C164.586 15.7249 167.097 18.1189 167.097 21.0732C167.097 24.0255 164.586 26.4214 161.493 26.4214C158.399 26.4214 155.89 24.0255 155.89 21.0732Z"
                fill={color2}
            />
            <path
                d="M66.8856 89.4857C66.8856 89.4857 69.6731 83.0287 73.7264 86.4792C77.0819 89.3346 73.9881 92.6183 73.4667 93.669C72.3908 95.8304 37.8279 148.181 37.8279 148.181C37.8279 148.181 35.647 154.433 31.396 151.296C26.9937 148.051 31.7449 143.554 31.7449 143.554L66.8856 89.4857Z"
                fill={color2}
            />
            <path
                d="M151.512 34.7414C151.512 34.7414 152.856 28.6856 158.45 29.7634C163.081 30.6551 160.489 34.3867 160.191 35.3986C159.58 37.4805 135.059 91.2362 135.059 91.2362C135.059 91.2362 134.349 96.8984 128.619 96.1405C122.687 95.3554 126.822 90.0421 126.822 90.0421L151.512 34.7414Z"
                fill={color2}
            />
            <path
                d="M110.358 94.1694C110.358 94.1694 115.765 97.3814 112.324 100.987C109.478 103.972 106.896 100.729 106.022 100.14C104.227 98.9282 89.8801 87.9759 89.8801 87.9759C89.8801 87.9759 84.5939 85.3629 87.7749 81.5402C91.0704 77.5857 94.5557 82.5191 94.5557 82.5191L110.358 94.1694Z"
                fill={color2}
            />
        </svg>
    )
}
